<template>
    <div class="column-detail">
        <div class="top-autor">
            <div class="img">
                <a-avatar :size="150" class="avatar" :src="column.avatar"></a-avatar>
            </div>
            <div class="right">
                <h4>{{column.title}}</h4>
                <p class="text-muted">{{column.description}}</p>
            </div>
        </div>
        <post-list :list="postList"/>
    </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import PostList from './../components/PostList.vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import { GlobalDataProps } from './../store';
export default defineComponent({
    name: 'column-detail',
    components: {
        PostList
    },
    setup() {
        const store = useStore<GlobalDataProps>();
        const route = useRoute();
        const columnId = +route.params.id;
        const column = computed(() => store.getters.getColumnList(columnId))
        const postList = computed(() => store.getters.getPostList(columnId))
        return {
            column,
            postList
        }
    }
})
</script>

<style lang="less" scoped>
.column-detail {
    width: 1200px;
    margin: auto;
    .top-autor {
        display: flex;
        margin: 0px 200px;
        box-sizing: border-box;
        padding-top: 50px;
        padding-bottom: 30px;
        border-bottom: 1px solid #dee2e6!important;
        .img {
            margin-right: 30px;
        }
        .right {
            h4 {
                color: #212529;
                font-size: 24px;
                margin-top: 15px;
                p {
                    color: #6c757d;
                    font-size: 16px;
                }
            }
        }
    }
}
</style>